<template>
    <div id="home" class="upload">
        <div class="uploadContain">
            <div class="upload-demo">
                <el-upload
                    drag
                    action="#"
                    :http-request="importFacility"
                    :on-change="handleChange"
                    :file-list="fileList"
                    v-model="uploadList"
                    accept=".xlsx,.xls"
                    :on-success="
                        (res) => {
                            return handleExcelImportSuccess(res);
                        }
                    "
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        拖拽到这里 或者 <em>点击这里</em> 上传
                    </div>
                    <template #tip>
                        <div class="el-upload__tip" style="line-height: 2">
                            文件格式：.xlsx、.xls
                        </div>
                    </template>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import equipmentHttp from "@/https/equipment.js";
import { ElMessage, ElMessageBox } from "element-plus";
const fileList = ref([]);
const uploadList = ref([]);

const emit = defineEmits(["submitEditEmit"]);
const handleChange = (file, fileList) => {
    console.log(file, fileList);
    uploadList.value = fileList;
    if (fileList.length > 1) {
        fileList.splice(0, 1);
    }
};

const importFacility = (params) => {
    console.log(params);
    let dataObj = {
        file: params.file,
        isCover: false,
    };
    equipmentHttp.importFacility(dataObj).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
            ElMessage({
                message: "上传成功",
                type: "success",
            });
            emit("submitEditEmit");
        } else if (res.data.code == 50002) {
            ElMessageBox.confirm("设备唯一识别有重复，是否覆盖", "提示", {
                confirmButtonText: "覆盖",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let dataObj2 = {
                        file: params.file,
                        isCover: true,
                    };
                    equipmentHttp.importFacility(dataObj2).then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            ElMessage({
                                message: "上传成功",
                                type: "success",
                            });
                            emit("submitEditEmit");
                        } else {
                            fileList.value = [];
                            ElMessage({
                                message: res.data.msg,
                                type: "error",
                            });
                        }
                    });
                })
                .catch(() => {});
        } else {
            fileList.value = [];
            ElMessage({
                message: res.data.msg,
                type: "error",
            });
        }
    });
};
const handleExcelImportSuccess = (res) => {
    console.log("--------", res);
};
</script>